<template>
  <main class="main-wrap">
        <!-- 一对一家教 -->
        <section class="cnt-wrap content-1">
            <div class="part part-1">
                <img src="static/img/img_09.png">
                <div class="top-logo">
                    <div class="logo"><img src="static/img/img_logo.png" alt=""></div>
                    <div class="name">栗志家教</div>
                    <div class="phone-num">咨询电话：1569-200-3711</div>
                </div>
                <div class="descript">
                    <p>中小学上门家教</p>
                    <p>专业1对1&nbsp;轻松做学霸</p>
                    <span>一线名师+定制化辅导=平均分提高39分</span>
                </div>
                <div class="btn">
                    <a href="javascript: ;" onclick="doyoo.util.openChat('g=10078821');return false;" target="_blank">
                        <span class="btn-1">抢200元名师试听券<i><img src="static/img/img_arrow_05.png"></i></span>
                    </a>
                </div>
            </div>
        </section>
        <!-- 成绩不理想？我们帮你找原因 -->
        <section class="cnt-wrap content-2">
            <div class="part part-2">
                <!-- <img class="pic_h2" src="static/img/title_2.jpg" /> -->
                <p class="title">
                    <span>
                        <i><img src="static/img/arrow_4.png" alt=""></i>
                        成绩不理想？我们帮您找原因
                        <i><img src="static/img/arrow_3.png" alt=""></i>
                    </span>
                </p>
                <div class="reason-list">
                    <ul>
                        <li>
                            <p>
                                <img src="static/img/img_04.png">
                            </p>
                            <p class="reason">基础薄弱&nbsp;学习困难</p>
                            <p class="reason-detail">课堂时间短</p>
                            <p class="reason-detail">老师讲的快，学起来吃力</p>
                        </li>
                        <li>
                            <p>
                                <img src="static/img/img_06.png">
                            </p>
                            <p class="reason">粗心马虎&nbsp;失误不断</p>
                            <p class="reason-detail">审题不清</p>
                            <p class="reason-detail">粗心大意，考试总失分</p>
                        </li>
                        <li>
                            <p>
                                <img src="static/img/img_08.png">
                            </p>
                            <p class="reason">效率低下&nbsp;苦学无果</p>
                            <p class="reason-detail">找不到方法</p>
                            <p class="reason-detail">苦苦学习，成绩没提高</p>
                        </li>
                        <li>
                            <p>
                                <img src="static/img/img_10.png">
                            </p>
                            <p class="reason">生搬硬套&nbsp;连蒙带猜</p>
                            <p class="reason-detail">不会归纳总结</p>
                            <p class="reason-detail">例题会做了，考试做不来</p>
                        </li>
                    </ul>
                </div>
                <div class="btn">
                    <a href="javascript: ;" onclick="doyoo.util.openChat('g=10078821');return false;" target="_blank">
                        <span class="btn-2">点击查看抢分方案&nbsp;>></span>
                    </a>
                </div>
            </div>
        </section>
        <!-- 我们为每一个孩子提供定制化家教辅导 -->
        <section class="cnt-wrap content-3">
            <div class="part part-3">
                <p class="title">
                    <span>
                        <i><img src="static/img/arrow_4.png" alt=""></i>
                        我们为每一个孩子提供定制化家教辅导
                        <i><img src="static/img/arrow_3.png" alt=""></i>
                    </span>
                </p>
                <div class="process-wrap">
                    <ul class="step-1">
                        <li>
                            <p class="process-step">沟通了解</p>
                            <div class="detail">
                                <p>专职1对1</p>
                                <p>充分了解孩子学习状况</p>
                            </div>
                        </li>
                        <li class="s2">
                            <p class="process-step">系统匹配</p>
                            <div class="detail">
                                <p>大数据处理技术</p>
                                <p>系统内筛选匹配最合适的老师</p>
                            </div>
                        </li>
                        <li class="s3">
                            <p class="process-step">免费试讲</p>
                            <div class="detail">
                                <p>名师上门免费试讲</p>
                                <p>足不出户选名师</p>
                            </div>
                        </li>
                    </ul>
                    <ul class="step-2">
                        <li>
                            <p class="process-step">学习鼓励金</p>
                            <div class="detail">
                                <p>家长会员制</p>
                                <p>更有学习鼓励金赠送</p>
                            </div>
                        </li>
                        <li class="s2">
                            <p class="process-step">教学反馈</p>
                            <div class="detail">
                                <p>班主任1对1跟进，采用独家</p>
                                <p>教学系统，孩子学习情况家长全掌握</p>
                            </div>
                        </li>
                        <li class="s3">
                            <p class="process-step">学习计划</p>
                            <div class="detail">
                                <p>因材施教，提供个</p>
                                <p>性化课程辅导，快速提分</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <img src="static/img/img_03.png">
                <div class="btn">
                    <a href="javascript: ;" onclick="doyoo.util.openChat('g=10078821');return false;" target="_blank">
                        <span class="btn-3">我要定制化辅导&nbsp;>></span>
                    </a>
                </div>
            </div>
        </section>
        <!-- 专业一对一 -->
        <section class="cnt-wrap content-4">
            <div class="part part-4">
                <p class="title">
                    <span>
                        <i><img src="static/img/arrow_4.png" alt=""></i>
                        专业1对1，品质保证，值得信赖
                        <i><img src="static/img/arrow_3.png" alt=""></i>
                    </span>
                </p>
                <img src="static/img/img_13.png">
            </div>
        </section>
        <!-- 0元请家教 -->
        <section class="cnt-wrap section_5">
            <div class="cnt_bg"></div>
            <div class="cnt clearfix">
                <div class="ask_teacher">
                    <h3 class="form_title">0元请家教</h3>
                    <p class="form_info">超值派送价值200元听课卷，仅限前100名！</p>
                    <!-- <form action="" method=""> -->
                        <!-- 姓名 -->
                        <p>
                            <input type="text" ref="name" v-model="name" placeholder="姓名" @blur="checkName(this)">
                        </p>
                        <span class="pc-tips" ref="tips1">名字格式不对或为空!请输入中文名字。</span>
                        <!-- 手机号 -->
                        <p>
                            <input type="number" v-model="tel" ref="tel" placeholder="手机号" @blur="checkTel(this)">
                        </p>
                        <span class="pc-tips" ref="tips2">手机号不正确或为空!请输入正确手机号。</span>
                        <!-- 年级 -->
                        <div class="form_select clearfix">
                            <select class="fl" ref="gra_sel" @click="setVal()">
                                <option value="0">年级</option>
                                <option value="1">小学</option>
                                <option value="2">初中</option>
                                <option value="3">高中</option>
                                <option value="4">其他</option>
                            </select>
                            <!-- 科目 -->
                            <select ref="sub_sel" class="fr" @click="checkVal">
                              <option value="0">科目</option>
                            </select>
                        </div>
                        <button @click="submit">马上领取</button>
                    <!-- </form> -->
                </div>
            </div>
        </section>
        <!-- 号成绩，从好老师开始 -->
        <section class="cnt-wrap section_6">
            <div class="cnt">
                <h1>
                <span class="arrow arrow-1"></span>
                好成绩<i> </i>从好老师开始
                <span class="arrow arrow-2"></span>
            </h1>
                <div class="teacher-info">
                    <ul>
                        <li>
                            <p><span class="orange_text">5000</span><span>人+</span></p>
                            <p><span>一线名师</span></p>
                        </li>
                        <li>
                            <p><span class="orange_text">2</span><span>年+</span></p>
                            <p><span>平均教龄</span></p>
                        </li>
                        <li>
                            <p><span class="orange_text">3000</span><span>次+</span></p>
                            <p><span>实时答疑</span></p>
                        </li>
                        <li>
                            <p><span class="orange_text">97</span><span>%+</span></p>
                            <p><span>学生好评率</span></p>
                        </li>
                        <li>
                            <p><span class="orange_text">25</span><span>分+</span></p>
                            <p><span>平均提分</span></p>
                        </li>
                    </ul>
                </div>
                <div class="teacher-show">
                    <div class="tec-cnt tec-1">
                        <img src="static/img/t3.png" alt="老师图片" />
                        <div class="info">
                            <span class="name">骆老师</span>
                            <span class="educate">华南理工大学<i></i>数学专业<i></i></span>
                            <span class="line"></span>
                            <div class="intro">
                                <p>曾获得初中高中全国数学邀请赛一等奖，初中高中全国希望杯数学邀请赛金奖，拥有丰富讲课经验。有过多段高中数学家教辅导经验，擅长针对解题方法进行归纳总结，善于跟学生沟通，辅导的学生数学成绩提高很快！</p>
                            </div>
                        </div>
                    </div>
                    <div class="tec-cnt tec-3">
                        <img src="static/img/t1.png" alt="老师图片" />
                        <div class="info">
                            <span class="name">王老师</span>
                            <span class="educate">华南师范大学<i></i>英语专业<i></i>研究生</span>
                            <span class="line"></span>
                            <div class="intro">
                                <p>获得全国多项英语比赛奖项，英语能力一流。有过多次高中、初中英语家教辅导经验，沟通能力佳，教学能力强，辅导的学生成绩提升较快，曾多次获得家长好评！</p>
                            </div>
                        </div>
                    </div>
                    <div class="tec-cnt tec-4">
                        <img src="static/img/t4.png" alt="老师图片" />
                        <div class="info">
                            <span class="name">肖老师</span>
                            <span class="educate">中山大学<i></i>汉语言专业</span>
                            <span class="line"></span>
                            <div class="intro">
                                <p>本科期间，曾获“国家励志奖学金”“校三好学生”“校优秀学生干部”“社会实践先进个人”等奖项。有过多次初中、小学语文及数学家教经验，沟通能力强，极具亲和力，教会学生学习方法，多次获得家长好评！</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>
        <!-- 好成绩看得见 -->
        <section class="cnt-wrap section_7">
            <!-- <div class="cnt"> -->
            <div class="cnt" @mouseover="clearInt()" @mouseout="playInt()">
                <h1>
                <span class="arrow arrow-3"></span>
                好成绩<i> </i>看得见
                <span class="arrow arrow-4"></span>
            </h1>
                <div class="slide_wrap">
                    <ul class="pic_slide" ref="pic_slide">
                        <li><img ref="talk_pics" class="talk_pics" src="static/img/phone_1.jpg"></li>
                        <li><img ref="talk_pics" class="talk_pics" src="static/img/phone_2.png"></li>
                        <li><img ref="talk_pics" class="talk_pics" src="static/img/phone_4.png"></li>
                        <li><img ref="talk_pics" class="talk_pics" src="static/img/phone_5.png"></li>
                        <li><img ref="talk_pics" class="talk_pics" src="static/img/phone_6.png"></li>
                        <li><img ref="talk_pics" class="talk_pics" src="static/img/phone_7.png"></li>
                    </ul>
                </div>
                <a class="btn left_btn" href="javascript:;" @click="prevPic()"></a>
                <a class="btn right_btn" href="javascript:;" @click="nextPic()"></a>
            </div>
        </section>
        <!-- 服务遍布全国 -->
        <section class="cnt-wrap section_8">
            <div class="cover"></div>
            <div class="cnt">
                <h1>我们的服务遍布全国</h1>
                <img src="static/img/map_2.png" />
            </div>
        </section>
        <div class="fc" ref="fc" style="display: none;"></div>
        <div class="fc_body" ref="fc_body" style="display: none;">
            <div class="fcb_top">
                <div class="fc_title">
                    <h2>选择你想咨询的课程</h2>
                    <h3>已有30万家长免费听</h3>
                </div>
            </div>
            <div class="fcb_bottom">
                <div>
                    <img src="static/img/img_17.png">
                    <a href="javascript: ;" onclick="doyoo.util.openChat('g=10078821');return false;" target="_blank"><img src="static/img/img_20.png"></a>
                </div>
                <div>
                    <img src="static/img/img_16.png">
                    <a href="javascript: ;" onclick="doyoo.util.openChat('g=10078821');return false;" target="_blank"><img src="static/img/img_21.png"></a>
                </div>
                <div>
                    <img src="static/img/img_18.png">
                    <a href="javascript: ;" onclick="doyoo.util.openChat('g=10078821');return false;" class="left-btn" target="_blank"><img src="static/img/img_21.png"></a>
                </div>
                <div>
                    <img src="static/img/img_15.png">
                    <a href="javascript: ;" onclick="doyoo.util.openChat('g=10078821');return false;" target="_blank"><img src="static/img/img_21.png"></a>
                </div>
            </div>
            <span class="fc_body_clock" @click="closeFc" ref="fc_body_clock"><i></i></span>
        </div>
<!--         <div class="panel">
            <a href="javascript: ;" onclick="doyoo.util.openChat('g=10078821');return false;" target="_blank">
                <img src="static/img/img_19.png">
            </a>
        </div> -->
    </main>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      slide_count: 0,
      slide_length: 0,
      inv: null,
      ind: 0,
      tel: '',
      name: '',
      val: 0,
      subject_high: ['课业辅导','语文','数学','英语','物理','化学','文综','其他'],
      subject_pri: ['课业辅导','语文','数学','英语'],
      custom: ''
    }
  },
  created() {
    this.custom = window.location.search.substr(1)
    this.setCookie('custom',this.custom,30);
    var that = this
    this.slide_length = document.getElementsByClassName('talk_pics').length;
    this.playInt();
    setTimeout(function(){
      that.$refs.fc.style.display = 'block';
      that.$refs.fc_body.style.display = 'block';
    },12000)
  },
  methods: {
    setCookie: function(cname, cvalue, exdays) {
      var d = new Date();
      d.setTime(d.getTime() + (exdays * 60 * 1000));
      var expires = "expires=" + d.toGMTString();
      console.info(cname + "=" + cvalue + "; " + expires);
      document.cookie = cname + "=" + cvalue + "; " + expires;
      console.info(document.cookie);
    },
    getCookie: function(cname) {
      var name = cname + "=";
      var ca = document.cookie.split(';');
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
      }
      return "";
    },
    setVal(){
      this.val = this.$refs.gra_sel.value
      console.log(this.val)
      if(this.val == 1){
        this.creEl(this.subject_pri)
      }else if(this.val != 0){
        this.creEl(this.subject_high)
      }
    },
    checkVal(){
      if(this.val == 0){
        this.$refs.sub_sel.innerHTML = '<option value="0">科目</option>'
        alert("请先选择年级")
      }
    },
    creEl(arr){
      this.$refs.sub_sel.innerHTML = '<option value="0">科目</option>'
      for(var i=0; i<arr.length;i++){
        var el = document.createElement('option')
        el.value = i+1
        el.innerHTML = arr[i]
        this.$refs.sub_sel.appendChild(el)
      }
    },
    closeFc(){
      this.$refs.fc.style.display = 'none';
      this.$refs.fc_body.style.display = 'none';
    },
    playInt(){
      var that = this
      this.inv = setInterval(function(){
        that.nextPic()
      },4000);
    },
    clearInt(){
      clearInterval(this.inv)
    },
    checkName() {
      var name = this.name;
      if (!(/^[\u4e00-\u9fa5]+(·[\u4e00-\u9fa5]+)*$/.test(name))) {
          this.$refs.tips1.style.visibility = 'visible'
      } else {
          this.$refs.tips1.style.visibility = 'hidden'
      }
  },
  checkTel() {
      var tel = this.tel;
      if (!(/^[1][3,4,5,7,8][0-9]{9}$/.test(tel))) {
          this.$refs.tips2.style.visibility = 'visible'
      } else {
          this.$refs.tips2.style.visibility = 'hidden'
      }
  },
  showAsk() {
      var self = this;
      this.$refs.ask_body.style.display = "block"
      setTimeout(function() {
          self.$refs.ask_cnt.style.bottom = "0";
      }, 200)
  },
  hideAsk() {
      var self = this;
      this.$refs.ask_cnt.style.bottom = "-80%";
      setTimeout(function() {
          self.$refs.ask_body.style.display = "none"
      }, 200)
  },
  submit(){
    if( this.tel == '' || this.name == ''){
      alert('姓名或手机号不能为空')
      return false;
    }
    this.ind = this.$refs.sub_sel.value
    console.log(this.ind)
    this.$axios({
      url: 'http://api.web.delijiajiao.com/marketing/consulation/submit',
      method: 'post',
      data: {
          name: this.name,
          phone: this.tel,
          grade: this.val,
          subject: this.ind,
          custom: this.custom
        }
      }).then(function(data) {
        alert(data.data.msg)
      })
    },
    prevPic() {
      this.slide_length = document.getElementsByClassName('talk_pics').length;
      if(this.slide_count == 0){
        this.$refs.pic_slide.style.left = '-' + (this.slide_length - 2) * 365 + 'px';
        this.slide_count = this.slide_length - 2;
      }else{
        this.$refs.pic_slide.style.left = '-' + (this.slide_count - 1)*365 + 'px';
        this.slide_count = this.slide_count - 1;
      }
    },
    nextPic() {
      this.slide_length = document.getElementsByClassName('talk_pics').length;
      if(this.slide_count == this.slide_length - 2){
        this.$refs.pic_slide.style.left = '0';
        this.slide_count = 0;
      }else{
        this.$refs.pic_slide.style.left = '-' + (this.slide_count + 1) * 365 + 'px';
        this.slide_count ++
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
img {
    width: auto
}
* {
    padding: 0;
    margin: 0;
}
html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
}
ul,li {
    list-style: none;
}
select {
    border: none;
    outline: none;
}

.main-wrap {
    max-width: 1920px;
    min-width: 1200px;
    margin: 0 auto;
}
/**********/
.cnt-wrap {
    position: relative;
    width: 100%;
}
.content-1 {
    position: relative;
    background: url(../assets/img_01.jpg) no-repeat;
}
.content-2 {
    background: url(../../static/img/img_05.jpg) no-repeat;
}
.content-4 {
    background: url(../../static/img/bg_2.jpg) no-repeat;
    background-size: cover;
    margin-bottom: 100px;
}
.top-logo {
    position: absolute;
    top: 45px;
    left: 190px;
    color: #ccc;
}
.cnt-wrap .part{
    width: 1200px;
    margin: 0 auto;
    position: relative;
}
.cnt-wrap .part-1 {
    text-align: left;
}
.cnt-wrap .part-1,.cnt-wrap .part-2{
    position: relative;
    height: 655px;
}
.cnt-wrap .part-2 .title, .cnt-wrap .part-3 .title, .cnt-wrap .part-4 .title {
    padding-top: 100px;
    text-align: center;
}
.cnt-wrap .part-2 .title span, .cnt-wrap .part-3 .title span, .cnt-wrap .part-4 .title span {
    font-size: 34px;
}
.cnt-wrap .part-2 .reason-list {
    padding-top: 100px;
    padding-left: 180px;
}
.cnt-wrap .part-2 .reason-list ul:after {
    content: '';
    display: block;
    clear: both;
}
.cnt-wrap .part-2 li {
    float: left;
    width: 180px;
    list-style: none;
    margin-right: 40px;
    padding-bottom: 25px;
    background-color: #fff;
    transition: box-shadow 0.3s;
}
.cnt-wrap .part-2 li:hover {
    box-shadow: 5px 5px 10px #c4c4c4;
}
.cnt-wrap .part-2 li p {
    text-align: center;

}
.cnt-wrap .part-2 li p.reason {
    font-size: 14px;
    font-weight: bold;
    margin: 16px 0;
}
.cnt-wrap .part-2 li p.reason-detail {
    color: #afafaf;
    font-size: 12px;
    margin-bottom: 6px;
}
.cnt-wrap .part-2 li img {
    width: 100%;
}
.cnt-wrap .part-3 {
    text-align: center;
    padding-bottom: 160px;
}
.cnt-wrap .part-3 .title, .cnt-wrap .part-4 .title {
    padding-bottom: 100px;
}
.cnt-wrap .part-4 .title {
    color: #fff;
    padding-bottom: 41px;
}
.cnt-wrap .part .check-more {
    text-align: center;
    margin-top: 50px;
}
.cnt-wrap .part-4 {
    position: relative;
    padding-bottom: 50px;
}
/*******/
.cnt {
    position: relative;
    width: 1200px;
    left: 50%;
    margin-left: -600px;
}
.section_5 {
    margin-top: 40px;
    height: 632px;
    background: url(../../static/img/bg_left.jpg) no-repeat;
}
.cnt_bg {
    float: right;
    width: 365px;
    height: 632px;
    background: url(../../static/img/bg_left.jpg) right 0 no-repeat;
}
.clearfix:after {
    content:"";
    display: block;
    clear:both;
}
.ask_teacher {
    float: right;
    padding: 80px 0px 10px;
    width: 452px;
    height: 693px;
    background: url(../../static/img/form_bg.jpg) no-repeat;
    color: #fff;
    box-sizing: border-box;
    text-align: center;
    border-radius: 18px;
    overflow: hidden;
}
.form_title {
    font-weight: bold;
    font-size: 30px;
    margin-bottom: 15px;
}
.form_info {
    font-size: 18px;
    margin-bottom: 90px;
}
.ask_teacher input {
    text-align: center;
    height: 60px;
    width: 340px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}
.form_select {
    padding: 0px 55px;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.form_select select {
    width: 150px;
    height: 60px;
    color: #b7b7b7;
    padding-left: 50px;
    font-size: 18px;
    border-radius: 5px;
    background-color: #fff;
}
.pc-tips {
    display: block;
    margin-bottom: 15px;
    color: #f54545;
    visibility: hidden;
}
.ask_teacher button {
    width: 304px;
    height: 75px;
    border: 1px solid #fff;
    border-radius: 40px;
    background: #fcc803;
    color: #fff;
    font-size: 30px;
    margin-top: 60px;
    letter-spacing: 2px;
    font-weight: bold;
    cursor: pointer;
}
.ask_teacher button:hover {
    background: #f2d04f;
}
.section_6 {
    margin-top: 130px;
    height: 870px;
    background-color: #fcc803;
    overflow: hidden;
}
.cnt h1 {
    text-align: center;
    padding-top: 45px;
    font-size: 40px;
    margin-bottom: 50px;
}
.cnt h1 i {
    margin: 0 12px;
}
.section_6 h1 {
    color: #fff;
}
.cnt .arrow {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 27px;
}
.cnt .arrow-1 {
    left: 0px;
    top: -15px;
    background: url(../../static/img/arrow_1.png) 0 0 no-repeat;
}
.cnt .arrow-2 {
    left: 0px;
    top: 15px;
    background: url(../../static/img/arrow_2.png) 0 0 no-repeat;
}
.teacher-info>ul {
    text-align: center;
}
.teacher-info>ul>li {
    display: inline-block;
    width: 152px;
    height: 145px;
    background-color: #fff;
    color: #b0b0b0;
    padding-top: 25px;
    box-sizing: border-box;
    margin: 0 20px;
    font-size: 18px;
}
.teacher-info>ul>li p {
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
}
.teacher-info>ul>li p .orange_text {
    color: #fc7e03;
    font-size: 40px;
}

.opop {
    -webkit-filter: brightness(0.3) blur(9px) opacity(0.4);
}

.teacher-show {
    position: relative;
    width: 1px;
    left: 50%;
    margin-top: 125px;
}
.tec-cnt {
    position: absolute;
    top: 40px;
}
.tec-cnt img {
    width: 280px;
}
.tec-1 {
    left: -425px;
}
.tec-3 {
    right: -145px;
}
.tec-4 {
    right: -460px;
}
.teacher-show .item.on .info {
    display: block;
}
.tec-cnt img:hover + .info {
    display: block
}
.teacher-show:hover .tec-cnt {
    -webkit-filter: brightness(0.7) blur(9px) opacity(0.8);
}
.teacher-show .tec-cnt:hover {
    z-index: 10;
    -webkit-filter: none;
}
.teacher-show .tec-1 .info,
.teacher-show .tec-2 .info {
    left: -280px;
    border-radius: 25px 0 15px 0;
}
.teacher-show .info {
    position: absolute;
    width: 300px;
    background: #fff;
    border-radius: 0 25px 0 15px;
    left: 260px;
    top: 145px;
    display: none;
    padding: 20px 20px;
    box-sizing: border-box;
}
.teacher-show .info .name {
    float: left;
    top: 0px;
    display: inline-block;
    width: 20px;
    height: 100%;
    font-size: 18px;
    line-height: 25px;
}
.educate {
    float: left;
    display: inline-block;
    width: 10px;
    font-size: 12px;
    color: #666;
    line-height: 15px;
    margin: 0 5px;
}
.educate i {
    display: inline-block;
}
.teacher-show .intro {
    float: left;
    width: 180px;
    bottom: 15px;
    display: inline-block;
    margin-left: 5px;
    line-height: 25px;
    font-size: 14px;
    text-align: justify;
    color: #848484;
}
.teacher-show .intro p {
    display: inline-block;
}
.teacher-show .line {
    float: left;
    display: inline-block;
    width: 1px;
    height: 80px;
    background: #ddd;
    margin: 0 10px 0 15px;
}
.section_7 {
    height: 1000px;
    background: #fff;
}
.section_7 .cnt {
    height: 100%;
}
.cnt .arrow-3 {
    left: 0px;
    top: -15px;
    background: url(../../static/img/arrow_4.png) 0 0 no-repeat;
}
.cnt .arrow-4 {
    left: 0px;
    top: 15px;
    background: url(../../static/img/arrow_3.png) 0 0 no-repeat;
}
.section_7 .btn {
    position: absolute;
    width: 82px;
    height: 157px;
    background-color: #e5e5e5;
    top: 50%;
    margin-top: -41px;
    background-repeat: no-repeat;
    background-position: 15px 30px ;
}
.section_7 h1 {
    padding-top: 85px;
    margin-bottom: 100px;
}
.section_7 .btn:hover {
    background-color: #f0eded;
}
.section_7 .left_btn {
    left: 0;
    background-image: url(../../static/img/left.png);
}
.section_7 .right_btn {
    right: 0;
    background-image: url(../../static/img/right.png);
}
.slide_wrap {
    position: relative;
    left: 50%;
    margin-left: -365px;
    overflow: hidden;
    width: 730px;
    height: 100%;
}
.pic_slide {
    position: relative;
    left: 0;
    transition: .3s;
    width: 7300px;
}
.pic_slide li {
    float: left;
    width: 325px;
    height: 650px;
    margin: 0 20px;
}
.pic_slide li img {
    width: 100%;
    height: 100%;
}
.section_8 {
    position: relative;
    background: url(../../static/img/map_1.jpg) left bottom no-repeat;
    height: 984px;
}
.section_8 .cnt {
    height: 100%;
}
.section_8 h1 {
    color: #fff;
}
.section_8 .cover {
    position: absolute;
    width: 100%;
    height: 960px;
    bottom: 0;
    background: rgba(0,0,0,.5);
}
.section_8 img {
    position: relative;
    bottom: 5px;
}
.fc {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.41);
    z-index: 998;
    left: 0;
    bottom: 0;
}

.fc_body {
    position: fixed;
    background: transparent;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 605px;
    border-radius: 10px;
    z-index: 999;
    background-color: #fff;
}

.fcb_top {
    width: 100%;
    padding: 30px 0;
    text-align: center;
}

.fcb_top h3 {
    color: #f7b528;
}

.fcb_bottom {
    overflow: hidden;
    padding: 10px 0 10px 16px;
}

.fcb_bottom div {
    display: inline-block;
    position: relative;
    margin-right: 10px;
    margin-bottom: 10px;
}

.fcb_bottom div:nth-child(3) a {
    right: 0;
    left: 10px;
}

.fcb_bottom div a {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.fc_body_clock {
    position: absolute;
    background: #f7b528;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    top: -12px;
    right: -12px;
    text-align: center;
    line-height: 29px;
    cursor: pointer;
}

.fc_body_clock i {
    background: url(../../static/img/X.png)center center no-repeat;
    background-size: 100%;
    width: 13px;
    height: 13px;
    display: inline-block;
    position: absolute;
    top: 6px;
    right: 7px;
}
.top-logo {
    position: absolute;
    top: 0;
    left: 0;
}

.top-logo div {
    float: left;
}

.top-logo .logo {
    margin-left: 18px;
    margin-top: 6px;
}

.top-logo .name {
    width: 47px;
    padding: 6px 25px;
    font-size: 22px;
}

.top-logo .phone-num {
    position: absolute;
    width: 220px;
    top: 45px;
    left: 181px;
    color: #cfcfcf;
}

.part-1 .btn,
.part-2 .btn,
.part-3 .btn {
    position: absolute;
    bottom: 80px;
}

.part-1 .btn a {
    border: 1px solid #2b2b2b;
}

.part-1 .btn a:hover,
.part-2 .btn a:hover,
.part-3 .btn a:hover {
    border: 1px solid #fff;
}

.part-1 .btn a,
.part-2 .btn a,
.part-3 .btn a {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding: 5px 20px;
    font-size: 14px;
    font-family: 'Microsoft YaHei';
    background-color: #2b2b2b;
    border-radius: 35px;
    color: #fffcef;
    text-decoration: none;
}

.part-1 .btn .btn-1 i,
.part-1 .btn .btn-1 img {
    vertical-align: sub;
}

.part-1 .btn .btn-1 i {
    margin-left: 10px;
}

.part-1 .descript {
    position: absolute;
    top: 215px;
    font-size: 60px;
    color: #fff;
}

.part-1 .descript p {
    letter-spacing: 4px;
}

.part-1 .descript span {
    font-size: 26px;
    font-weight: 600;
}

.part-2 .btn,
.part-3 .btn {
    left: 514px;
}

.part-2 .btn a,
.part-3 .btn a {
    border: 1px solid #ffca00;
    background-color: #ffca00;
    color: #fff;
}
.part-3 .process-wrap {
    position: absolute;
    top: 245px;
    left: 0;
}
.part-3 .process-wrap ul:after {
    content: '';
    display: block;
    clear: both;
}
.part-3 .process-wrap ul li {
    float: left;
    width: 225px;
}
.part-3 .process-wrap ul.step-1 {
    margin-top: 160px;
    margin-left: 138px;
}
.part-3 .process-wrap ul .process-step {
    font-weight: bold;
    margin-bottom: 15px;
}
.part-3 .process-wrap ul .detail {
    color: #afafaf;
}
.part-3 .process-wrap ul.step-2 {
    margin-top: 240px;
    margin-left: 138px;
}
.part-3 .process-wrap ul .s2 {
    margin-left: 126px;
}
.part-3 .process-wrap ul .s3 {
    margin-left: 122px;
}
.part-3 .process-wrap .detail {
    font-size: 14px;
}

</style>
